<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>

<page title="Home" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"      
      xsi:noNamespaceSchemaLocation="http://www.netbiscuits.com/schema/netbiscuits-tactile.xsd">

<external file="jquery.min.js" type="script"/>
<external file="newstand-script.jsp" type="script"/>
<external file="newstand.css" type="css" /> 

<layout id="root" height="parent.height" width="parent.width" top="0" left="0">	
	
	<layout id="header" height="40" width="parent.width" top="0" left="0" zindex="999">
	
		<layout width="20" height="40" top="0" left="0">
			<view>
				<FORM>
					<input name="homeCount" id="homeCount" type="hidden" value="${fn:length(listFeed)}"/>					
					<input name="selectedMenu" id="selectedMenu" type="hidden" value="${menu}"/>
					
					<c:forEach items="${listCatalogue}" var="c" varStatus="status">
						<input id="cat${status.index}" type="hidden" value="${c}"/>
					</c:forEach>
				</FORM>
			
				<SEPARATOR/>							
			</view>	
		</layout>	
	
		<layout width="25" height="30" top="10" left="20">
			<view id="back" height="22" width="25" left="20" display="none" effect-type="fade">
				<IMAGE>
					<img class="backpos" src="images/BackArrow.gif" format="GIF" alt="back"/>
				</IMAGE>
			</view>
		</layout>	
		
		<layout id="title" width="parent.width-45" height="35" top="5" left="45">
			<layout height="parent.height" width="parent.width" left="((parent.width + 45) / 2) - 90">
				<view>
					<TEXT>
						<styles>
							<style name="font-size" value="large"/>						
						</styles>
						<richtext>[b]newsstand[/b]</richtext>
					</TEXT>				
				</view>
			</layout>			
		</layout>					
				
	</layout>
	
	<layout id="menu" height="28" width="parent.width" top="40" left="0" effect-type="slide" effect-duration="750" effect-transition="easeIn">
		<layout height="25" width="parent.width" top="0" left="0" position="absolute" class="menu">
			<view height="parent.height" width="parent.width" top="0" left="40" position="absolute">
				<flexview id="view-menu"
					height="parent.height"
					width="parent.width"
					top="0"
					left="0"
					flexflow="horizontal"
					flexdimension="width"				
					position="absolute">
					
					<item>
						<TEXT id="home" class="menuselected">
							<richtext>HOME</richtext>
						</TEXT>
					</item>
					<item>
						<TEXT id="tech" class="menunotselected">
							<richtext>TECH</richtext>
						</TEXT>
					</item>					
				</flexview>			
			</view>	
		</layout>	
		
		<layout height="3" width="parent.width" top="25" left="0" posision="absolute" class="layoutseparator">
			<view>
				<SEPARATOR/>							
			</view>
		</layout>			
	</layout>		
	
	<layout id="detail-content" class="detail-content" height="parent.height-43" width="parent.width" top="43" left="0" display="none"> 
	   <layout id="layout-desc" class="layout-desc" height="parent.height" width="parent.width" top="0" left="0">
	   		<view id="view-desc" class="view-content" display="none" height="parent.height" width="parent.width" top="parent.height/2">
	     		<TABLE>
					    <styles>
					    	<style name="text-align" value="center"/>
					    </styles>
						<row>
							<cell>
								<img src="images/ajax-loader.gif" convert="false" suppressdimensions="true"></img>
							</cell>
						</row>
				</TABLE>
	       </view>    			
	       
	       <view id="view-content" class="view-content" display="none" height="parent.height" width="parent.width" top="0" left="0" scroll="vertical">
	       	   
	       </view>
	   </layout>	    	        			    							
		
	</layout>		
	
	<layout id="nav" class="detail-content" height="210" width="parent.width" top="0" left="0" display="none">
		<view id="view-nav" height="parent.height" width="parent.width" top="0" left="0">
				
		</view>
	</layout>
	
	<layout id="temp" class="detail-content" height="parent.height-68" width="parent.width" top="68" left="0" display="none">
		<view id="slide-nav" height="parent.height" width="parent.width" top="0" left="0">
				
		</view>
	</layout>			
	
	<layout id="content" class="content" height="parent.height-68" width="parent.width" top="68" left="0" display="block" effect-type="fade" effect-transition="easeIn" effect-duration="750">
								
			<view id="pull-view" height="20" width="parent.width" top="-20" left="0" display="none">
				<TABLE>										
				    <row>
				    	<cell text-align="right" width="45%">
				    		<img class="pull" src="images/small-arrow.png" format="PNG" width="21" convert="false" height="35"/>
				    	</cell>				    	
				    	<cell width="55%">
				    		<richtext>Pull to refresh</richtext>
				    	</cell>
				    </row>
				</TABLE>								
			</view>
			
			<view id="release-view" height="20" width="parent.width" top="-20" left="0" display="none">
				<TABLE>										
				    <row>
				    	<cell text-align="right" width="45%">
				    		<img class="release" src="images/small-arrow.png" format="PNG" width="21" convert="false" height="35"/>
				    	</cell>				    	
				    	<cell width="55%">
				    		<richtext>Release to refresh</richtext>
				    	</cell>
				    </row>
				</TABLE>								
			</view>
			
			<!-- 
				Trying to use multi view instead of view. It would be something like
				
				<multiview>
					<view>
					<flexview>
					...
					...
								
				However it seems the horizontal scroll in flexview doesn't work properly when using multiview. 				  
			 -->
							
			<view id="main-view" scroll="vertical" height="parent.height" top="0" left="0" width="parent.width">
			
				<c:forEach items="${listFeed}" var="feed" varStatus="status">
					<c:set var="separator" value="${(status.index + 1) * 4}" scope="page"/>																										
	
					<view id="homesubtitle${status.index}" class="subtitle" height="20" width="parent.width*1/3" top="(${status.index}*20) + (${status.index}*190) + ${separator}" left="0" position="absolute">
				    	<TEXT>			    				    	
				    		<richtext><c:out value="${feed.title}"/>&nbsp;</richtext>
				    	</TEXT>
				    </view>	
				    
				    <view id="homeloader${status.index}" height="20" width="90" top="(${status.index}*20) + (${status.index}*190) + ${separator}" left="(parent.width*1/3) + 10" position="absolute" display="none">
				    	<IMAGE>
				    		<img class="loaderimg" src="images/news-loader.gif" alt="loading"/>
				    	</IMAGE>
				    </view>			    				    				    				    				    
				    
				    <view id="homecatalogue${status.index}"
				    	width="parent.width" height="190"
				    	position="absolute" overflow="hidden" top="((${status.index} + 1)*20) + (${status.index}*190) + ${separator}" left="0">
				    	
					    	<flexview 
									id="homecatalogueview${status.index}" 						
									width="parent.width" 
									height="190" 					
									flexflow="horizontal"
									flexdimension="width"
									flexitems-gap="5"
									flexitems-width="180"
									flexitems-height="180"			
									scroll="horizontal">
									
									<c:forEach items="${feed.listNews}" var="news" varStatus="loop">	
										<item id="${news.id}">
											<group class="news">
												<IMAGE class="img">
													<img convert="false" format="JPG" src="${news.image}"/>
												</IMAGE>
												<TEXT class="transbox">																
													<richtext><c:out value="${news.title}"/></richtext>
												</TEXT>
											</group>	
										</item>							
									</c:forEach>																					
							</flexview>	
				    </view>				    				    
								
					<view id="homeseparator${status.index}" height="4" width="parent.width" top="((${status.index} + 1)*20) + ((${status.index} + 1)*190) + ${separator}" left="0" position="absolute">
						<SEPARATOR/>							
					</view>										
					
				</c:forEach>							   	    		    																								
																					
			</view>	
			
			<view id="tech-view" scroll="vertical" height="parent.height" top="0" left="0" width="parent.width" display="none">
			
				<c:forEach items="${listTechFeed}" var="tech" varStatus="status">							
					<c:set var="separator" value="${(status.index + 1) * 4}" scope="page"/>																										
	
					<view id="techsubtitle${status.index}" class="subtitle" height="20" width="parent.width*1/3" top="(${status.index}*20) + (${status.index}*190) + ${separator}" left="0" position="absolute">
				    	<TEXT>			    				    	
				    		<richtext><c:out value="${tech.title}"/>&nbsp;</richtext>
				    	</TEXT>
				    </view>	
				    
				    <view id="techloader${status.index}" height="20" width="90" top="(${status.index}*20) + (${status.index}*190) + ${separator}" left="(parent.width*1/3) + 10" position="absolute" display="none">
				    	<IMAGE>
				    		<img class="loaderimg" src="images/news-loader.gif" alt="loading"/>
				    	</IMAGE>
				    </view>		
				    
				    <view id="techcatalogue${status.index}"
				    	width="parent.width" height="190"
				    	position="absolute" overflow="hidden" top="((${status.index} + 1)*20) + (${status.index}*190) + ${separator}" left="0">
				    	
				    	<flexview 
								id="techcatalogueview${status.index}" 						
								width="parent.width" 
								height="190" 					
								flexflow="horizontal"
								flexdimension="width"
								flexitems-gap="5"
								flexitems-width="180"
								flexitems-height="180"			
								scroll="horizontal">
															
								<c:forEach items="${tech.listNews}" var="news" varStatus="loop">	
									<item id="${news.id}">
										<group class="news">
											<IMAGE class="img">
												<img convert="false" format="JPG" src="${news.image}"/>
											</IMAGE>
											<TEXT class="transbox">																
												<richtext><c:out value="${news.title}"/></richtext>
											</TEXT>
										</group>	
									</item>							
								</c:forEach>																					
						</flexview>	
				    	
					</view>	    				    				    				    				    				    				    
								
					<view id="techseparator${status.index}" height="4" width="parent.width" top="((${status.index} + 1)*20) + ((${status.index} + 1)*190) + ${separator}" left="0" position="absolute">
						<SEPARATOR/>							
					</view>										
					
				</c:forEach>							   	    		    																								
																					
			</view>													
																																								
	</layout>
		
</layout>	
	
</page>		